﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css" />
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/index.js"></script>
</head>

<body>


    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <li><a href="#"><img src="images/slidepic1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" alt="" /></a></li>
            </ul>
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>

    <script>
        const json = [
            {   //  1
                width: 400,
                top: 70,
                left: 50,
                opacity: 20,
                'z-index': 2
            },
            {  // 2
                width: 600,
                top: 120,
                left: 0,
                opacity: 80,
                'z-index': 3
            },
            {   // 3
                width: 800,
                top: 100,
                left: 200,
                opacity: 100,
                'z-index': 4
            },
            {  // 4
                width: 600,
                top: 120,
                left: 600,
                opacity: 80,
                'z-index': 3
            },
            {   //5
                width: 400,
                top: 70,
                left: 750,
                opacity: 20,
                'z-index': 2
            }
        ];

        $(function () {
            //显示按钮
            $('.wrap').on({
                mouseover: function () {
                    $('.arrow').css('opacity', 1)
                },
                mouseout: function () {
                    $('.arrow').css('opacity', 0)
                }
            })

            //让图片显示
            $('li').each(function (index, e) {
                // console.log(index);
                console.log(e, index);
                $(this).css(json[index])
            })


            //图片轮播

            /*  function fn() {
             let i = 0
                 
                 setInterval(function () {
                     i++
                     $('li').each(function (index, e) {
                         // console.log(index);
                         console.log(e, index);
                         index = (index + i) % 5
                         $(this).css(json[index])
                     })
                 }, 1000)
             } */

            let i = 0
            $('.next').click(function () {
                i++
                $('li').each(function (index, e) {
                    // console.log(index);
                    console.log(e, index);
                    index = (index + i) % 5
                    $(this).css(json[index]).animate(500)
                })
            })
        })
    </script>

</body>

</html>